<template>
  <div class="station-select-component" :style="{with:width}">
    <div class="select-block">
      <a-select style="width: 100%" placeholder="产线" @change="onChangeLine"  v-model="value1" :allowClear="allowClear">
        <a-select-option v-for="(item,index) in list1" :value="item.productionlineId" :key="'lines-sel-'+index">{{item.productionlineName}}</a-select-option>
      </a-select>
    </div>
    <div class="divider"></div>
    <div class="select-block">
      <a-select style="width: 100%" placeholder="工位" v-model="value2" :allowClear="allowClear">
        <a-select-option v-for="(item,index) in list2" :value="item.takeMaterialsSiteId" :key="'stations-sel-'+index">{{item.takeMaterialsSite}}</a-select-option>
      </a-select>
    </div>
    <div class="mask" v-if="loading">
      <a-icon type="loading" />&nbsp;&nbsp;&nbsp;Loading...
    </div>
  </div>
</template>

<script>
import { getUserDefaultLine } from '@/utils/util'
export default {
  name:'stationSelectComponent',
  emits:['input','change'],
  props:{
    width:{
      type:String,
      default:'100%'
    },
    value:{
      type:Array,
      default:function(){
        return []
      }
    },
    allowClear:{
      type:Boolean,
      default:false
    },
    getLines:{
      default:function(){
        return function(){
          return new Promise(function(resolve){
            resolve(null)
          })
        }
      }
    },
    getStations:{
      default:function(){
        return function(){
          return new Promise(function(resolve){
            resolve(null)
          })
        }
      }
    }
  },
  data(){
    return {
      list1:[],
      list2:[],
      value1:undefined,
      value2:undefined,
      loading:false
    }
  },
  mounted(){
    this.init()
  },
  watch:{
    value1(newVal,oldVal){
      if (newVal!==oldVal) {
        this.backValue()
      }
    },
    value2(newVal,oldVal){
      if (newVal!==oldVal) {
        this.backValue()
      }
    }
  },
  methods:{
    clear(){
      this.value1 = undefined
      this.value2 = undefined
      this.list2 = []
    },
    init(){
      this.initValue()
      this.loading = true
      this.getLines().then((d)=>{
        this.list1 = d.data || []
        this.setDefaultInitLine()
        this.loading = false;
      }).catch(()=>{
        this.loading = false;
      })
    },
    setDefaultInitLine(){
      let val = getUserDefaultLine(this.$store,this.list1,'productionlineId')
      if (!val && this.list1.length===1) {
        val = this.list1[0].productionlineId
      }
      this.value1 = val
      this.changeLine(val)
    },
    initValue(){
      if (this.value[0]) this.value1 = this.value[0]
      if (this.value[1]) this.value2 = this.value[1]
    },
    onChangeLine(val){
      this.changeLine(val,false)
    },
    changeLine(val,init=true){
      if (val) {
        this.loading = true;
        this.getStations(val).then((d)=>{
          this.list2 = d.data || []
          if (this.list2.length===1) {
            let val = this.list2[0].takeMaterialsSiteId
            this.value2 = val
          }
          this.loading = false;
        }).catch(()=>{
          this.list2 = []
          this.value2 = undefined
          this.loading = false;
        })
      } else {
        if (!init) {
          this.list2 = []
          this.value2 = undefined
        }
      }
    },
    backValue(){
      this.$emit('input',[this.value1,this.value2])
      this.$emit('change',[this.value1,this.value2])
    },
    getFullValue(){
      let res = [null,null]
      for (let i=0;i<this.list1.length;i++) {
        if (this.list1[i].productionlineId===this.value1) {
          res[0] = {...this.list1[i]}
          break;
        }
      }
      for (let i=0;i<this.list2.length;i++) {
        if (this.list2[i].takeMaterialsSiteId===this.value2) {
          res[1] = {...this.list2[i]}
          break;
        }
      }
      return res
    }
  }
}
</script>

<style scoped lang="less">
.station-select-component{
  display: flex;
  position: relative;
  .select-block{
    width: 1px;
    flex-grow: 1;
  }
  .divider{
    flex-shrink: 0;
    width: 4px;
  }
  .mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F0F8FF;
    overflow: hidden;
  }
}
</style>